//调用接口
// import axios from 'axios'
// const axios = require('axios')
// axios.defaults.baseURL = ''

//验证码get请求
const myAxios = axios.create({
  baseURL: 'http://d67ekh.natappfree.cc',
  timeout: 200000,
  headers: {
    'Content-Type': 'application/json'
  }
})
myAxios.defaults.withCredentials = true
// axios.defaults.withCredentials = true
let hcode
async function sendVerificationCode(email) {
  try {
    const response = await myAxios.get('/user/captcha', {
      params: {
        // 将 email 作为对象属性传递
        email: email || undefined,
      }
    })
    console.log(response.data)
    return {
      code: response.data.code,
      msg: response.data.msg,
      hcode: response.data
    }
  }
  catch (error) {
    const status = error.response?.status
    return {
      code: status,
      data: null,
      msg: error.message
    }
  }
}

//注册post请求
const myAxios_second = axios.create({
  baseURL: 'http://d67ekh.natappfree.cc',
  timeout: 200000,
  headers: {
    'Content-Type': 'application/json'
  }
})
myAxios_second.defaults.withCredentials = true
async function userRegister(gxh) {
  try {
    const response = await myAxios_second.post('/user/register', {
      email: gxh.email?.trim(),
      password: gxh.password,
      code: gxh.code,
      hcode: gxh.hcode
    })
    console.log(response.data)
    return {
      code: response.data.code,
      data: response.data.data,
      msg: response.data.msg,
      hcode: response.data.hcode
    }
  } catch (error) {
    const status = error.response?.status
    return {
      code: status,
      data: null,
      msg: error.message
    }
  }
}
//下次改进QAQ
const boss = document.querySelector('.log_box')
const box = document.querySelector('.log_in .log_verification')
const box2 = document.querySelector('.in_password')
const box3 = document.querySelector('.log_log')
const account = document.querySelector('.log_email .account')
const code = document.querySelector('.log_verification .import .code')
const password = document.querySelector('.in_password .import .password')
const email_empty = document.querySelector('.email_incomplete .empty')
const email_wrong = document.querySelector('.email_incomplete .wrong')
const code_empty = document.querySelector('.code_incomplete .empty')
const code_wrong = document.querySelector('.code_incomplete .wrong')
const password_empty = document.querySelector('.password_incomplete .empty')
const password_wrong = document.querySelector('.password_incomplete .wrong')
const symbol_up = document.querySelector('.email_incomplete i')
const symbol_middle = document.querySelector('.code_incomplete i')
const symbol_down = document.querySelector('.password_incomplete i')
const code_judge = document.querySelector('.acquire p')
const acquire = document.querySelector('.acquire')
const log = document.querySelector('.log_log_log')
const repeat = document.querySelector('.log_repeat .repeat')
const header_img_xianshi = document.querySelector('.header_img img')
const sun_download_hidden = document.querySelector('.sun_download')
//验证码正则表达式
const verificationCodeRegex = /^\d{6}$/
//重新输入用户信息时，不存在提示信息消失
//邮箱账号重新输入时，提示信息消失
account.addEventListener('input', () => {
  repeat.style.display = 'none'
  email_wrong.style.display = 'none'
  box.style.marginTop = '20px'
  symbol_up.style.display = 'none'
})
//邮箱账号输入后，提示信息消失
account.addEventListener('input', () => {
  email_empty.style.display = 'none'
  box.style.marginTop = '20px'
  symbol_up.style.display = 'none'
})
//验证码输入时，提示信息消失
code.addEventListener('input', () => {
  code_empty.style.display = 'none'
  box2.style.marginTop = '20px'
  symbol_middle.style.display = 'none'
})
//验证码重新输入时，提示信息消失
code.addEventListener('input', () => {
  repeat.style.display = 'none'
  code_wrong.style.display = 'none'
  box2.style.marginTop = '20px'
  symbol_middle.style.display = 'none'
})
//密码输入时，提示信息消失
password.addEventListener('input', () => {
  password_empty.style.display = 'none'
  box3.style.marginTop = '30px'
  symbol_down.style.display = 'none'
})
//密码重新输入时，提示信息消失
password.addEventListener('input', () => {
  repeat.style.display = 'none'
  password_wrong.style.display = 'none'
  box3.style.marginTop = '30px'
  symbol_down.style.display = 'none'
})

function judgeTureOrNot() {
  //邮箱账号未输入获取验证码时，提示信息显示
  if (!account.value) {
    email_empty.style.display = 'inline-block'
    box.style.marginTop = '10px'
    symbol_up.style.display = 'inline-block'
  } else {
    if (!standard.test(account.value)) {
      //邮箱账号输入错误时，提示信息显示
      email_wrong.style.display = 'inline-block'
      box.style.marginTop = '10px'
      symbol_up.style.display = 'inline-block'
    }
  }
}
//获取验证码.acquire按钮
acquire.addEventListener('click', () => {
  judgeTureOrNot()
  if (standard.test(account.value)) {
    //30秒计时器
    let i = 30
    let n = setInterval(
      //倒计时过程中不可重复发送
      function () {
        acquire.style.cursor = 'not-allowed'
        i--
        code_judge.innerHTML = `${i}秒后重发`
        code_judge.style.color = 'black'
        acquire.style.backgroundColor = '#DDD'
        if (i == 0) {
          clearInterval(n)
          acquire.style.cursor = 'pointer'
          acquire.style.backgroundColor = '#ff3a3a'
          code_judge.disabled = false
          code_judge.innerHTML = '获取验证码'
          code_judge.style.color = '#fff'
        }
      }, 1000)
    sendVerificationCode(account.value).then(response => {
      if (!response.code) {
        console.log('验证码发送成功')
      }
      hcode = response.hcode.data

    }).catch(err => console.log(err))
  }
})


//注册按钮
log.addEventListener('click', async () => {
  judgeTureOrNot()
  //验证码未输入时，提示信息显示
  if (!code.value) {
    code_empty.style.display = 'inline-block'
    box2.style.marginTop = '10px'
    symbol_middle.style.display = 'inline-block'
  }
  //验证码格式错误时，提示信息显示
  else if (!verificationCodeRegex.test(code.value)) {
    code_wrong.style.display = 'inline-block'
    box2.style.marginTop = '10px'
    symbol_middle.style.display = 'inline-block'
  }
  //密码未输入时，提示信息显示
  if (!password.value) {
    password_empty.style.display = 'inline-block'
    box3.style.marginTop = '18px'
    symbol_down.style.display = 'inline-block'
  }
  //密码格式错误时，提示信息显示
  else if (!passwordRegex.test(password.value)) {
    password_wrong.style.display = 'inline-block'
    box3.style.marginTop = '18px'
    symbol_down.style.display = 'inline-block'
  }
  if (account.value && verificationCodeRegex.test(code.value) && passwordRegex.test(password.value)) {
    const gxh = {
      code: code.value,
      email: account.value,
      password: password.value,
      hcode: hcode
    }
    //注册
    await userRegister(gxh)
      .then(response => {
        // console.log(gxh);
        if (response.code === -1) {
          repeat.style.display = 'inline-block'
        }
        if (!response.code) {
          console.log('注册成功')
          boss.style.display = 'none'
          header_img_xianshi.style.display = 'block'
          sun_download_hidden.style.display = 'none'
        }
      }).catch(err => console.log(err))
  }
})

//密码框密码显示与隐藏
const eye = document.querySelector('.in_password .import span')
eye.addEventListener('click', () => {
  if (eye.className == 'iconfont icon-biyan') {
    eye.classList.remove('icon-biyan')
    eye.classList.add('icon-yanjing')
    password.type = 'text'
  } else if (eye.className == 'iconfont icon-yanjing') {
    eye.classList.remove('icon-yanjing')
    eye.classList.add('icon-biyan')
    password.type = 'password'
  }
})

//登录里的这几个页面切换
const t_login = document.querySelector('.log_in')
const t_in_middle = document.querySelector('.in_middle')
const t_log_other = document.querySelector('.log_other')
const t_log_home = document.querySelector('.log_home')
const t_other_way = document.querySelector('.other_way')
const t_title = document.querySelector('.log_black p')
const input_check = document.querySelector('.other_way .bottom input')
const alert_box = document.querySelector('.alert_box')
//切换到其他登录方式

document.querySelector('.log_other span').addEventListener('click', () => {
  //其他的display:none
  t_other_way.style.display = 'block'
  t_login.style.display = 'none'
  t_log_other.style.display = 'none'
  t_log_home.style.display = 'none'
  t_in_middle.style.display = 'none'
  t_title.innerHTML = '登录'
})

document.querySelector('.in_automatic .in_code').addEventListener('click', () => {
  t_other_way.style.display = 'none'
  t_login.style.display = 'block'
  t_log_other.style.display = 'block'
  t_log_home.style.display = 'none'
  t_in_middle.style.display = 'none'
  t_title.innerHTML = '邮箱注册'
})

document.querySelector('.log_password a').addEventListener('click', () => {
  t_other_way.style.display = 'none'
  t_login.style.display = 'none'
  t_log_other.style.display = 'block'
  t_log_home.style.display = 'none'
  t_in_middle.style.display = 'block'
  t_title.innerHTML = '密码登录'
})

document.querySelector('.log_home .home_down').addEventListener('click', () => {
  t_other_way.style.display = 'block'
  t_login.style.display = 'none'
  t_log_other.style.display = 'none'
  t_log_home.style.display = 'none'
  t_in_middle.style.display = 'none'
  t_title.innerHTML = '登录'
})
function alert_boxs() {
  alert_box.style.display = 'inline-block'
  setTimeout(() => {
    alert_box.style.display = 'none'
  }, 1500)
}
document.querySelector('.right-down img').addEventListener('click', () => {
  if (input_check.checked) {
    t_other_way.style.display = 'none'
    t_login.style.display = 'none'
    t_log_other.style.display = 'none'
    t_log_home.style.display = 'block'
    t_in_middle.style.display = 'none'
    t_title.innerHTML = '登录'
  }
  else {
    alert_boxs()
  }
})

document.querySelector('.toRegister span').addEventListener('click', () => {
  if (input_check.checked) {
    t_other_way.style.display = 'none'
    t_login.style.display = 'block'
    t_log_other.style.display = 'block'
    t_log_home.style.display = 'none'
    t_in_middle.style.display = 'none'
    t_title.innerHTML = '邮箱注册'
  }
  else {
    alert_boxs()
  }
})

document.querySelector('.toLogin span').addEventListener('click', () => {
  if (input_check.checked) {
    t_other_way.style.display = 'none'
    t_login.style.display = 'none'
    t_log_other.style.display = 'block'
    t_log_home.style.display = 'none'
    t_in_middle.style.display = 'block'
    t_title.innerHTML = '密码登录'
  }
  else {
    alert_boxs()
  }
})